<template>
	<view class="page">
		<u-navbar leftIconSize='30rpx'  leftText="提交订单"
			@leftClick="$utils.back()" :placeholder="true" border>
		</u-navbar>
		<view style="flex: 1;overflow: hidden;">
			<scroll-view :scroll-y="true" style="height: 100%;">
				<view class="contentBox">
					<u-steps current="1" activeColor='green'>
						<u-steps-item title="创建订单">
						</u-steps-item>
						<u-steps-item title="确认订单"></u-steps-item>
						<u-steps-item title="支付订单"></u-steps-item>
						<u-steps-item title="交易完成"></u-steps-item>
					</u-steps>
				</view>
				<template v-if="mapLoading">
					<u-skeleton rows="3" :title='false' loading></u-skeleton>
				</template>
				<view v-else class="contentBox padding">
					<view class="mb20">
						<u-icon name='map' label="收货地址" size="30rpx" labelSize="30rpx" />
					</view>
					<view class="mapBox">
						<view style="flex: 1;margin-right: 10rpx;" v-if="map">
							<view>
								<u-text size='28rpx' :lines='1' :text='map.address_district' />
							</view>
							<view>
								<u-text size='24rpx' color='#bbb' :lines='1' :text='`${map.name}  ${map.phone}`' />
							</view>
						</view>
						<view @click='jumpAddress' >
							{{map?'修改':'新增'}}地址
						</view>
					</view>
				</view>
				<paySkeleton v-if='loading'></paySkeleton>
				<view class="contentBox padding" v-else>
					<view class="box">
						<u--image radius='8rpx' :showLoading="true" :src="data.thumb" width="320rpx"
							height="180rpx"></u--image>
						<view>
							<view>
								<u--text :lines="2" :text="data.title" size='28rpx'></u--text>
							</view>
							<view style="display: flex;justify-content: space-between;">
								<text style="color: red;">
									￥{{data.charge}}
								</text>
								<text style="color: #bbb;">
									x1
								</text>
							</view>
						</view>
					</view>
				</view>
				<template v-if="loading">
					<u-skeleton rows="7" :title='false' loading></u-skeleton>
				</template>
				<template v-else>
					<view class="contentBox padding">
						<view style="display: flex;align-items: center;">
							<view style="margin-right: 20rpx;">
								订单备注：
							</view>
							<u--textarea v-model="title" placeholder="请输入备注" autoHeight></u--textarea>
						</view>
					</view>
				</template>
			</scroll-view>
		</view>
		<view class="footer" v-if="!loading">
			<view style="width: 600rpx; ">
				<u-button type="primary" color='red' :text="'提交订单￥'+data.charge" throttleTime="5000" shape="circle"
					@click="sumbit" :disabled='disabled'></u-button>
			</view>
		</view>

	</view>
</template>

<script>
	import paySkeleton from './components/paySkeleton.vue'
	export default {
		components: {
			paySkeleton,
		},
		data() {
			return {
				disabled: false,
				mapLoading: true,
				selectAddressId: null,
				map: null,
				title: null,
				user: uni.getStorageSync('user'),
				op: {},
				openid: uni.getStorageSync('openid'),
				data: {
					charge: 0
				},
				loading: true,
			}
		},

		mounted() {
			const that = this

		},
		onLoad(op) {
			this.op = op
			this.selectAddressId = op.selectAddressId
			this.get()
			this.$api.My.addresses().then(res => {
				if (this.selectAddressId) {
					this.map = res.data.data.filter(item => item.id == this.selectAddressId)[0]
				} else {
					this.map = res.data.data.filter(item => item.is_default)[0]
				}
				this.mapLoading = false
			})
		},
		methods: {
			jumpAddress() {
				uni.redirectTo({
					url: '/product/selectAddress?id=' + this.op.id + '&address_id=' + this.map.id
				})
			},
			get() {
				this.$api.Product.Detail(this.op.id).then(res => {
					this.data = res.data.product
					this.loading = false
				})
			},

			sumbit() {
				uni.showLoading({
					title: '生成订单中'
				})
				this.CreateOrder()
			},
			CreateOrder() {
				if(!this.map.id){
					uni.$u.toast('请先选择地址')
					return
				}
				this.disabled = true
				this.$api.Product.Order({
					product_id: this.op.id,
					address_id: this.map.id
				}).then(res => {
					this.Payment(res.data)
				}).catch(err => {
					uni.$u.toast(err.data.message)
					uni.hideLoading()
					this.disabled = false
				})

			},
			Payment(data) {
				this.$api.Recharge.Payment({
					order_id: data.order_id,
					openid: this.openid
				}).then(res => {
					uni.hideLoading()
					this.showCode(res.data)
				}).catch(err => {
					console.log(err)
					uni.hideLoading()
					uni.$u.toast(err.data.message)
					this.disabled = false
				})
			},
			showCode(data) {
				uni.requestPayment({
					provider: "wxpay",
					appid: data.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
					nonceStr: data.nonceStr, // 随机字符串
					package: data.package, // 固定值
					prepayId: data.package.substring(10), // 统一下单订单号 
					timeStamp: data.timeStamp, // 时间戳（单位：秒）
					signType: data.signType, // 签名，这里用的 MD5/RSA 签名
					paySign: data.paySign,
					success: (res) => {
						uni.reLaunch({
							url: '/My/success?charge=' + this.data.charge
						})

					},
					fail: (e) => {
						this.disabled = false
						uni.$u.toast('取消付款')
					}
				})
			}
			}
		}
</script>

<style scoped lang="scss">
	.mapBox {
		display: flex;
		align-items: center;

		>view:nth-child(2) {
			border-radius: 100rpx;
			padding: 10rpx;
			border: 1rpx solid #bbb;
		}
	}

	.page {
		height: 100vh;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 10rpx);
		/* 兼容 iOS 设备 */
		padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
	}

	.contentBox {
		margin: 0 0 20rpx;
		background-color: #fff;
		padding: 20rpx 0;
	}

	.padding {
		padding: 20rpx 40rpx;
	}



	.footer {
		align-items: center;
		width: 100vw;
		align-items: center;
		font-size: 12px;
		color: #010101;
		display: flex;
		justify-content: center;
		box-sizing: border-box;
		padding-top: 20rpx;
	}

	.content {
		font-size: 26rpx;

	}

	.box {
		// margin-top:  var(--status-bar-height) ;//给组件加个上边距
		justify-content: space-between;
		font-size: 26rpx;
		color: #010101;
		height: 180rpx;
		display: flex;

		>view:nth-child(2) {
			margin-left: 20rpx;
			height: 180rpx;
			display: flex;
			flex: 1;
			flex-direction: column;
			justify-content: space-between;
		}
	}
</style>